<template>
  <div class="hwita_table">
    <ElTable ref="tableRef" 
      :data="prop.tableConfig.tableData" 
      height="100%" 
      :stripe="prop.tableConfig.stripe || true" 
      :border="prop.tableConfig.border || false"
      v-loading="prop.loading" 
      @selection-change="handleSelectionChange" 
      @select="onSelect" 
      @row-click="onRowClick"
      @select-all="onSelectAll"
      @cell-click="onCellClick"
      fit>
      <ElTableColumn v-if="tableConfig.showSelection" type="selection" fixed="left" align="center" width="60"></ElTableColumn>
      <ElTableColumn v-if="tableConfig.showIndex" type="index" fixed="left" align="center" width="60" label="序号">
        <template v-slot="scope">
          <span>{{ (tableConfig.pagination.pageIndex - 1) * tableConfig.pagination.pageSize + scope.$index + 1 }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn v-for="col in tableConfig.columns?.filter(v => v.show)" 
        :key="col.prop" 
        :prop="col.prop"
        :label="col.label" 
        :width="col.width" 
        :align="col.align" 
        :fixed="col.fixed"
        :sortable="col.sort" fit>
        <template v-slot="{ row, column, $index }">
          <div :class="col.setClass?col.setClass(row):col.class" v-if="col.type === 'tag'">
            <ElTag :type="col.tagType(row)">{{ col.formatter?col.formatter(row):row[col.prop] }} </ElTag>
          </div>
          <div :class="col.setClass?col.setClass(row):col.class" v-else-if="col.type === 'html'" v-html="col.formatter?col.formatter(row):row[col.prop]"></div>
          <div :class="col.setClass?col.setClass(row):col.class" v-else>
            <div class="one_p" :class="column.id+$index" @mouseover="hover(column, $index)" @mouseout="tipVisible = false">
              <p v-if="col.type === 'time'">{{parseTime(row[col.prop])}}</p>
              <p v-else>{{col.formatter?col.formatter(row):row[col.prop]}}</p>
            </div>
          </div>
        </template>
      </ElTableColumn>
      <ElTableColumn v-if="tableConfig.showOperation" fixed="right" label="操作" align="center" :width="tableConfig.operationWidth || 100">
        <template v-slot="scope">
          <slot name="option" :row="scope.row"></slot>
          <ElButton v-for="btn in prop.tableConfig.options" link 
            :key="btn.label" 
            @click.prevent="btn.handle(scope.row)" 
            v-show="btn.isShow?btn.isShow(scope.row):true" 
            :disabled="(btn.disabledVerify&&btn.disabledVerify(scope.row))||btn.disabled" 
            :type="btn.type">{{btn.label}}</ElButton>
        </template><!-- v-if="isAuth(scope.row.auth)" -->
      </ElTableColumn>
    </ElTable>
  </div>
  <!-- 页码 -->
  <div class="hwita_pagination">
    <ElPagination :current-page="prop.tableConfig.pagination.pageIndex" 
    :page-size="prop.tableConfig.pagination.pageSize"
    :page-sizes="[10, 20, 50, 100]" 
    layout="total, sizes, prev, pager, next, jumper" 
    :total="Number(prop.tableConfig.total)"
    background small @size-change="onSizeChange" @current-change="onCurrentChange" />
  </div>
  <!-- 提示文字 -->
  <ElTooltip ref="tooltipRef" :visible="tipVisible" :virtual-ref="tipRef" virtual-triggering popper-class="singleton-tooltip">
    <template #content> <span> {{tipContent}}</span></template>
  </ElTooltip>
</template>
<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import {parseTime} from '../../utils/tool.js'
import { ElTooltip, ElPagination, ElTable, ElTableColumn, ElButton, ElTag} from 'element-plus'
import {isAuth} from '@/utils/index.js'

const prop = defineProps(['tableConfig', 'loading'])
const emit = defineEmits('onCurrentChange', 'onSizeChange', 'onSelect', 'onCellClick')
const tableRef = ref()
const tipVisible = ref()
const tipRef = ref()
const tipContent = ref()
const selectRows = ref([])
// 不可以多选 执行这里
const onSelect = async(val) => {
  if(prop.tableConfig.multiple) return
  let item = val.pop()
  tableRef.value.clearSelection()
  tableRef.value.toggleRowSelection(item, true)
  emit('onSelect', [item])
}
// 可以多选 执行这里
const handleSelectionChange = (val) => {
  if(!prop.tableConfig.multiple) return
  emit('onSelect', val)
}
// 选择行
const onRowClick = (val, row) => {
  onSelect([val])
  // if(prop.tableConfig.multiple) 
  // else {
  //   tableRef.value.toggleRowSelection(val, true)
  // } 
}
// 全选
const onSelectAll = () => {
  if(!prop.tableConfig.multiple){
    emit('onSelect', [])
    tableRef.value.clearSelection()
  }
}
// 当某个单元格被点击时会触发该事件
const onCellClick = (row, column, cell, event) => emit('onCellClick', row, column, cell, event)
// 修改每页行数
const onSizeChange = (size) => {
  emit('onSizeChange', size)
}
// 翻页
const onCurrentChange = (e) => {
  emit('onCurrentChange', e)
}
// 鼠标经过内容区域
const hover = (cloumn, idx) => {
  let contentDom = document.querySelector('.'+cloumn.id+idx)
  let textDom = contentDom.querySelector('p')
  tipVisible.value = cloumn.realWidth < (textDom.offsetWidth+24)
  tipRef.value = contentDom
  tipContent.value = textDom.innerText
}
</script>
<style scoped>
.hwita_pagination{
  background: #ffffff;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  padding: 15px;
}
.hwita_table{
  height: 100%;
  overflow: auto;
  flex: 1;
}
.one_p{
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
</style>